<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>统计分析</title>
    <!-- 引入Bootstrap -->
    <link rel="stylesheet" href="/static/Bootstrap/css/bootstrap.min.css"/>
    <!-- 引入jQuery -->
    <script src="/static/js/jquery-1.11.3.min.js"></script>
    <!-- 引入Bootstrap的JavaScript插件 -->
    <script src="/static/Bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入echarts -->
    <script src="/static/js/echarts.min.js"></script>

    <link href="/static/css/sb-admin-2.css" rel="stylesheet"/>
    <script src="/static/js/sb-admin-2.js"></script>
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/common.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
    <!-- 导航栏部分 -->
    <div th:replace="~{navbar :: nav }"></div>
    <!-- 统计分析部分  start-->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">统计分析</h3>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12" id="container">
                <div id="level" style="width: 840px;height:560px;"></div>
                <div id="field" style="width: 840px;height:560px;"></div>
                <div id="intent" style="width: 840px;height:560px;"></div>
            </div>
        </div>
    </div>
    <!-- 统计分析部分  end-->
</div>

<script type="text/javascript">
    function getLevelProportion() {
        $.post("/analysisController/proportion",
            {"type": '1'},
            function (data) {
                var myChart = echarts.init(document.getElementById('level'));
                var option;
                option = {
                    title: {
                        text: '客户级别比例',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'description'
                    },
                    legend: {
                        top: 'center',
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '客户来源',
                            type: 'pie',
                            radius: '50%',
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            });
    }

    function getFieldProportion() {
        $.post("/analysisController/proportion",
            {"type": '2'},
            function (data) {
                var myChart = echarts.init(document.getElementById('field'));
                var app = {};
                var option;
                option = {
                    title: {
                        text: '投资领域比例',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'description'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '投资领域',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: data
                        }
                    ]
                };
                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            });
    }

    function getIntentProportion() {
        $.post("/analysisController/proportion",
            {"type": '3'},
            function (data) {
                var xarrays = data.map(function (value, index) {
                    return value.name
                })
                var yarrars = data.map(function (value, index) {
                    return value.value
                })
                console.log(xarrays)
                console.log(yarrars)


                var myChart = echarts.init(document.getElementById("intent"));
                var app = {};
                var option;
                option = {
                    title: {
                        text: '投资意向统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '15%',
                        right: '15%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xarrays,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '投资意向',
                            type: 'bar',
                            barWidth: '60%',
                            data: yarrars
                        }
                    ]
                };

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            });
    }

    getLevelProportion();
    getFieldProportion();
    getIntentProportion();

</script>
</body>
</html>